<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <title><%=utils.capitalize(title)%></title>
        <meta name="description" content="<%=desc%>" />
        
        <meta property="og:image" content="https://pbs.twimg.com/profile_images/418009884429254656/lpxz9LHr.jpeg" />
        <meta name="google-site-verification" content="3YZMYT6XcVJlav0ZKb7MQrzjnRGApJS8FOsrG4fPrXo" />
        
        <link rel="canonical" href="http://bootstrapzero.com/">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="/theme.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,500,300,700' rel='stylesheet' type='text/css'>
        
        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <link rel="shortcut icon" href="/images/bz_icon.png">
    </head>
    <body>
    
    <div id="wrap">
    
    <header class="navbar navbar-bright navbar-fixed-top" role="banner" data-spy="affix" data-offset-top="80">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" id="brand" href="http://www.bootstrapzero.com" title="Bootstrap Zero is free themes for Bootstrap">Bootstrap <span style="color:#f9f9f9;font-weight:200;">Zero</span></a>
        </div>
        <nav class="collapse navbar-collapse" role="navigation" id="navbar">
            <ul class="nav navbar-nav">
                <li>
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Free Templates <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="/bootstrap-templates/starter">Starter Templates</a></li>
                    <li><a href="/bootstrap-templates/theme">Bootstrap Themes</a></li>
                    <li><a href="/bootstrap-templates">All Templates + Themes</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">More Templates</li>
                    <li><a href="/bootstrap-template/sidebar">Sidebar</a></li>
                    <li><a href="/bootstrap-template/affix-sidebar" title="Sticky sidebar example">Affix</a></li>
                    <li><a href="/bootstrap-template/landing-page">Landing Page</a></li>
                    <li><a href="/bootstrap-templates/one-page" title="Single page app templates">One Page</a></li>
                    <li><a href="/bootstrap-templates/portfolio">Portfolio</a></li>
                    <li><a href="/bootstrap-templates/admin" title="Admin and dashboard themes">Admin</a></li>
                    <li><a href="/bootstrap-template/off-canvas-sidebar">Off-canvas</a></li>
                    <li><a href="/bootstrap-template/blog">Blog</a></li>
                    <li><a href="/bootstrap-template/fixed-width">Fixed Width</a></li>
                    <li><a href="/bootstrap-template/sign-in">Login</a></li>
                    <li><a href="/bootstrap-template/app">App</a></li>
                    <li><a href="/bootstrap-template/full-example">Full Example</a></li>
                    <li class="dropdown-header">More Themes</li>
                    <li><a href="/bootstrap-template/facebook">Facebook Theme</a></li>
                    <li><a href="/bootstrap-template/google-plus">Google Plus Theme</a></li>
                    <li><a href="/bootstrap-template/holo">Android Holo Theme</a></li>
                    <li><a href="/bootstrap-template/happy-scroll">Happy Scroll Theme</a></li>
                  </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://bootstrapbay.com/?ref=skelly" rel="nofollow" target="ext">Premium</a></li>
                <li><a href="#footer" id="btnAbout">About</a></li>
            </ul>
        </nav>
      </div>
    </header>
    
    <div style="height:62px;background-color:#32383e;"></div>
    
    <%-body%>        

    </div><!--/wrap-->

    <footer id="footer">
      <div class="container" role="contentinfo">
        <div class="row">
          <div class="col-sm-12">
          	<div class="row">
              <div class="col-md-12">
                <a href="http://bootstrapbay.com/?ref=skelly" rel="nofollow" target="ext" class="pull-right">More Bootstrap Themes</a>
                <ul class="list-inline">
              	<li><a href="https://github.com/iatek/bootstrap-zero" title="The Bootstrap Templates and Themes Project" rel="nofollow">GitHub Project</a></li>
              	<li><a href="https://plus.google.com/s/BootstrapZero" title="BootstrapZero on Google Plus" target="ext" rel="nofollow">Google+</a></li>
              	<li><a href="https://twitter.com/BootstrapZero" class="twitter-follow-button" data-show-count="true" data-lang="en">@BootstrapZero</a></li>
              	<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-show-count="true" data-url="http://bootstrapzero.com" data-related="BootstrapZero" data-text="@BootstrapZero: Incredible free templates and themes for Bootstrap 3">BootstrapZero</a></li>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                </ul>
              </div>
           	</div>
            <div class="row">
              <div class="col-md-12">
              	<ul class="list-inline">
                  <li><a href="http://getbootstrap.com" title="Official Bootstrap Site" rel="nofollow">Bootstrap</a></li>
                  <li><a href="http://expo.getbootstrap.com" title="Showcase of Bootstrap excellence" rel="nofollow">Expo</a></li>
                  <li><a href="http://www.bootbundle.com" title="Download free Bootstrap themes, templates and snippets" rel="nofollow" target="ext">BootBundle</a></li>
                  <li><a href="http://bootstrapbay.com/?ref=skelly" rel="nofollow" target="ext">BootstrapBay</a></li>
                  <li><a href="http://www.bootply.com" title="Bootstrap Editor and playground" rel="nofollow" target="ext">Bootply</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div><!--/row-->

        <div class="row">
        	<div class="col-md-12">
              	<p class="text-right">
              	MIT License. Built and Maintained by <a href="https://github.com/iatek/bootstrap-zero" rel="nofollow">Iatek</a>.
                </p>
          	</div>
        </div><!--/row-->
      </div>
    </footer>

    <!--about modal-->
    <div id="aboutModal" class="modal fade" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h2 class="text-center">About BootstrapZero</h2>
          </div>
          <div class="modal-body">
              
                <p>We love faster and easier Bootstrap development and wanted to make a contribution to the Bootstrap community.
                Bootstrap has evolved to become the most popular front-end, responsive design, CSS and JavaScript framework.</p>
                <p>Excited about the release of the "mobile-first" Bootstrap 3.0 in August 2013, we decided to build and share this
                collection of responsive templates that make the most of Bootstrap's powerful grid, CSS and components. Our focus is to
                make templates that adhere to best practices and make use of the Bootstrap baseline as much as possible.
                </p>
                <p>We want to leverage the best of Bootstrap. For now BootstrapZero is templates, but we're building a complete repository of Bootstrap templates, tools, plugins and resources. If you'd like to contribute a open source template or resource for inclusion on BootstapZero, please open a issue at the <a href="https://github.com/iatek/bootstrap-zero">GitHub fork</a>.</p>
                <br><br>
                <p class="text-center">
                     <a href="https://github.com/iatek/bootstrap-zero">BootstrapZero GitHub</a><br>
                     Twitter <a href="http://twitter.com/BootstrapZero">@BootstrapZero</a>
                </p>

          </div>
          <div class="modal-footer">
              <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
          </div>
      </div>
      </div>
    </div>
    
    <!--offer modal-->
    <div id="offerModal" class="modal fade" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header text-center">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h1 class="text-primary">Save 15%</h1>
              <h6 class="text-primary">Discount on Bootstrap products from <a href="http://designmodo.com/shop/?u=1063" rel="nofollow" target="ext">@Designmodo</a></h6>
          </div>
          <div class="modal-body text-center">
           
            <h4>
            Grab an amazing Bootstrap UI Kit, or the Startup Design Framework
            </h4>
            
            <div class="row">
              <div class="col-md-4">
                <a href="http://designmodo.com/shop/?u=1063" rel="nofollow" target="ext"><img title="Flat UI Pro - PSD and HTML User Interface Kit" src="http://designmodo.com/wp-content/uploads/2013/05/flat-ui-pro-1-2.png" alt="Flat UI Pro - PSD and HTML User Interface Kit" class="img-rounded img-responsive"></a>
              </div>
              <div class="col-md-4">
                <a href="http://designmodo.com/shop/?u=1063" rel="nofollow" target="ext"><img title="Square UI - Bootstrap theme" src="http://designmodo.com/wp-content/uploads/2013/02/square_ui.jpg" class="img-rounded img-responsive"></a>
              </div>
              <div class="col-md-4">
                <a href="http://designmodo.com/shop/?u=1063" rel="nofollow" target="ext"><img title="Startup Framework - Kickstart your Bootstrap project faster" src="http://designmodo.com/wp-content/uploads/2013/12/Startup-Framework-Shop.jpg" class="img-rounded img-responsive"></a>
              </div>
            </div>
            <hr>
            <h2 class="text-center text-primary">Grab this Deal Now</h2>
            <a href="http://designmodo.com/shop/?u=1063" target="ext" rel="nofollow" class="btn btn-primary btn-lg">Code: ZERO</a>
            <h6>click "Apply Coupon" to use this code at checkout <a href="http://designmodo.com/shop/?u=1063" rel="nofollow" target="ext">@Designmodo</a></h6>
          </div>
          <div class="modal-footer">
              <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
      </div>
      </div>
    </div>
    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type='text/javascript' src="/lazyload.js"></script>
    <script type='text/javascript'>
        
        $(document).ready(function() {
            
            //$('.navbar').fadeIn(600);
            
            /* highlight the top nav as scrolling occurs */
            $('body').scrollspy({ target: '#navbar' });
            
            $('#btnAbout').click(function(){
                $('#aboutModal').modal('show');
                return false;
            })
            
            /* sunburst effect 
            $('#masthead').pow({
                rays: 30,
                originY:'50%',
                originEl:'#brand',
                bgColorStart: '#563d7c',
                rayColorStart: '#563d7c',
                bgColorEnd: '#563d7c',
                rayColorEnd: '#664e8d',
                sizingRatio: 100
            });
            */
            
            $('[data-original]').lazyload({
                effect : "fadeIn"
            });
            
            $('#listTemplates').pageMe({perPage:15,pagerSelector:'#pagerTemplates'});
            
        });
        
        $.fn.pageMe = function(opts){
            var $this = this,
                defaults = {
                    perPage: 7,
                    showPrevNext: false,
                    hidePageNumbers: false
                },
                settings = $.extend(defaults, opts);
            
            var listElement = $this;
            var perPage = settings.perPage; 
            var children = listElement.children();
            var pager = $('.pager');
            
            if (typeof settings.childSelector!="undefined") {
                children = listElement.find(settings.childSelector);
            }
            
            if (typeof settings.pagerSelector!="undefined") {
                pager = $(settings.pagerSelector);
            }
            
            var numItems = children.size();
            var numPages = Math.ceil(numItems/perPage);
        
            pager.data("curr",0);
            
            if (settings.showPrevNext){
                $('<li><a href="#" class="prev_link">&laquo;</a></li>').appendTo(pager);
            }
            
            var curr = 0;
            while(numPages > curr && (settings.hidePageNumbers==false)){
                $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
                curr++;
            }
            
            if (settings.showPrevNext){
                $('<li><a href="#" class="next_link">&raquo;</a></li>').appendTo(pager);
            }
            
            pager.find('.page_link:first').addClass('active');
            pager.find('.prev_link').hide();
            if (numPages<=1) {
                //pager.find('.next_link').hide();
                pager.hide();
            }
            
            children.css('display', 'none');
            children.slice(0, perPage).css('display', 'block');
            
            pager.find('li .page_link').click(function(){
                var clickedPage = $(this).html().valueOf()-1;
                goTo(clickedPage,perPage);
                return false;
            });
            pager.find('li .prev_link').click(function(){
                previous();
                return false;
            });
            pager.find('li .next_link').click(function(){
                next();
                return false;
            });
            
            function previous(){
                var goToPage = parseInt(pager.data("curr")) - 1;
                goTo(goToPage);
            }
             
            function next(){
                goToPage = parseInt(pager.data("curr")) + 1;
                goTo(goToPage);
            }
            
            function goTo(page){
                var startAt = page * perPage,
                    endOn = startAt + perPage;
                
                children.css('display','none').slice(startAt, endOn).css('display','block');
                
                if (page>=1) {
                    pager.find('.prev_link').show();
                }
                else {
                    pager.find('.prev_link').hide();
                }
                
                if (page<(numPages-1)) {
                    pager.find('.next_link').show();
                }
                else {
                    pager.find('.next_link').hide();
                }
                
                $('html, body').animate({
                  scrollTop: $this.offset().top-10
                }, 1000);
                
                pager.data("curr",page);
                pager.attr("curr",page);
            }
        };
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-46791600-1', 'bootstrapzero.com');
      ga('send', 'pageview');
    </script>    
    </body>
</html>